<template>
  <div>
    <div class="flex flex-row flex-wrap justify-start gap-10 mb-30px">
      <div v-for="(p, index) in props.list" :key="index" @click="choose(p)">
        <div v-if="props.type === 'news'"></div>
        <div v-else-if="props.type === 'image'">
          <div
            :class="[
              p.media_id === nowChoose.media_id ? 'border border-[2px] border-[#07c160]  border-solid' : '',
              'w-[100px] h-[100px]'
            ]"
          >
            <div class="w-1/1 h-1/1 bg-[#f0f0f0]">
              <el-image class="w-1/1 h-1/1" :src="p.url" fit="scale-down"></el-image>
            </div>
          </div>
        </div>
        <div v-else-if="props.type === 'video'">
          <div
            :class="[
              p.media_id === nowChoose.media_id ? 'border border-[2px] border-[#07c160]  border-solid' : '',
              'w-[100px] h-[100px]'
            ]"
          >
            <div class="w-1/1 h-1/1 bg-[#f0f0f0]">
              <el-image class="w-1/1 h-1/1" src="./shipin1.png" fit="scale-down"></el-image>
            </div>
          </div>
        </div>
        <div v-else-if="props.type === 'voice'">
          <div
            :class="[p.media_id === nowChoose.media_id ? 'border border-[2px] border-[#07c160]  border-solid ' : '', 'w-[100px]']"
          >
            <div class="w-1/1 h-1/1 bg-[#f0f0f0]">
              <el-image class="w-1/1 h-1/1" src="./yinpin.png" fit="scale-down"></el-image>
            </div>
          </div>
        </div>
        <el-tooltip :content="dayjs(p.update_time * 1000).format('YYYY-MM-DD HH:mm:ss')" placement="top">
          <div class="w-[100px] text-center overflow-hidden overflow-ellipsis whitespace-nowrap mt-10px cursor-pointer">
            {{ p.name }}
          </div>
        </el-tooltip>
      </div>
    </div>
    <div class="flex flex-row justify-end relative">
      <div class="flex absolute left-[0px] top-[-5px]">
        <el-button type="success" v-if="nowChoose.media_id !== ''" @click="confirm">确认</el-button>
      </div>
      <el-pagination :total="props.total" background small></el-pagination>
    </div>
  </div>
</template>

<script setup lang="ts">
import dayjs from "dayjs";
import { ref } from "vue";
interface Props {
  list: any;
  type: "news" | "video" | "voice" | "image";
  total: number;
}

const nowChoose = ref<any>({ media_id: "" });

const emits = defineEmits(["confirm"]);
const choose = (p: any) => {
  if (nowChoose.value.media_id === p.media_id) {
    nowChoose.value = null;
    return;
  }
  nowChoose.value = p;
};

const confirm = () => {
  emits("confirm", { cont: nowChoose.value, type: props.type });
};

const props = defineProps<Props>();
</script>

<style></style>
